<template>
  <div class="catalogue-container ">
    <div class="left-menu">
      <el-input v-model="input1" :suffix-icon="Search" placeholder="搜索分类" size="large" style="width: 280px"/>
      <div class="nav_content">
        <div v-for="(item,index) in cardList" :key="index" class="flex justify-content-space-between item-nav" :class="{ active: activeIndex === index }" @click="changeIndex(item,index)">
          <img :src="item.icon" alt="" class="icon"/>
          <div class="title">{{ item.title }}</div>
          <div class="count">{{ item.count }}</div>
        </div>
      </div>
    </div>
    <div class="right-content">
      <div class="header">
        <div class="title">数据目录</div>
<!--        <HeaderTool @exportExcel="exportExcel" @selectDate="selectDate"></HeaderTool>-->
        <el-button type="primary" icon="download" @click="openDatePicker">导入数据</el-button>
      </div>
      <div class="wrapper">
        <div class="content">
          <el-input v-model="input1" :suffix-icon="Search" placeholder="搜索数据名称、来源系统..." size="large"/>
          <el-table :data="tableData" style="width: 100%;margin-top: 20px" >
            <el-table-column align="center" label="数据名称" prop="name"/>
            <el-table-column align="center" label="来源系统" prop="system"/>
            <el-table-column align="center" label="更新时间" prop="time"/>
            <el-table-column align="center" label="完整性状态">
              <template #default="scope"><span :class="getStatusClassName(scope)">{{ scope.row.status === 0 ? '完整' : scope.row.status === 1 ? '缺失' : '部分缺失' }}</span></template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template #default="scope">
                <el-button link icon="Edit" @click="handleUpdate(scope.row)"></el-button>
                <el-button link icon="View" @click="handleLook(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="footer">
          <pagination v-show="tableData.length > 5"
                      v-model:limit="cancerIndicator.maxResultCount"
                      v-model:page="cancerIndicator.skipCount"
                      :total="Number(tableData.length)"
                      @pagination="getCancerIndicatorList"/>

        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import {Back, Search} from '@element-plus/icons-vue'
import HeaderTool from "@/components/HeaderTool/index.vue";
import {ElMessage} from "element-plus";
const input1 = ref('');
const analyzeDialogVisible = ref(false);
const activeIndex = ref(0); // 当前激活的 item 索引
const getStatusClassName = (row) => {
  switch (row.row.status) {
    case 0:
      return 'complete';
    case 1:
      return 'missing';
    case 2:
      return 'partialMissing';
    default:
      return '';
  }
};

// 选择历史时间
const selectDate = (time) => {
  console.log("选择的历史时间是:", time);
};
// 导出excel文件
const exportExcel = () => {
  console.log("导出excel文件")
  analyzeDialogVisible.value = true;
};
const cardList = ref([
  {
    title: 'HIS（医院信息系统）',
    count: 247,
    icon: new URL('@/assets/static/门诊人次数.png', import.meta.url).href,
  }, {
    title: 'EMR（电子病历系统）',
    count: 150,
    icon: new URL('@/assets/static/出院人次数.png', import.meta.url).href,
  }, {
    title: 'LIS（检验系统）',
    count: 10,
    icon: new URL('@/assets/static/手术台次数.png', import.meta.url).href,
  },
  {
    title: 'PACS（影像系统）',
    count: 120,
    icon: new URL('@/assets/static/下转患者数.png', import.meta.url).href,
  },
  {
    title: 'HRP（医院资源规划系统）',
    count: 140,
    icon: new URL('@/assets/static/下转患者数.png', import.meta.url).href,
  },
  {
    title: '药房管理系统',
    count: 43,
    icon: new URL('@/assets/static/下转患者数.png', import.meta.url).href,
  },
  {
    title: '人力资源系统',
    count: 23,
    icon: new URL('@/assets/static/下转患者数.png', import.meta.url).href,
  },
  {
    title: '科研管理系统',
    count: 21,
    icon: new URL('@/assets/static/下转患者数.png', import.meta.url).href,
  },
  {
    title: '设备管理系统',
    count: 34,
    icon: new URL('@/assets/static/下转患者数.png', import.meta.url).href,
  },
  {
    title: '其它系统集合',
    count: 43,
    icon: new URL('@/assets/static/下转患者数.png', import.meta.url).href,
  }
]);

const tableData = reactive([

  {
    name: "患者基础信息表",
    system: "HIS系统",
    time: '2024-01-18 14:30',
    status: 0
  },
  {
    name: "患者基础信息表",
    system: "HIS系统",
    time: '2024-01-18 14:30',
    status: 1
  },  {
    name: "患者基础信息表",
    system: "HIS系统",
    time: '2024-01-18 14:30',
    status: 2
  },
  {
    name: "患者基础信息表",
    system: "HIS系统",
    time: '2024-01-18 14:30',
    status: 0
  },
  {
    name: "患者基础信息表",
    system: "HIS系统",
    time: '2024-01-18 14:30',
    status: 0
  },
  {
    name: "患者基础信息表",
    system: "HIS系统",
    time: '2024-01-18 14:30',
    status: 0
  },
  {
    name: "患者基础信息表",
    system: "HIS系统",
    time: '2024-01-18 14:30',
    status: 0
  },
  {
    name: "患者基础信息表",
    system: "HIS系统",
    time: '2024-01-18 14:30',
    status: 1
  },
  {
    name: "患者基础信息表",
    system: "HIS系统",
    time: '2024-01-18 14:30',
    status: 2
  },
  {
    name: "患者基础信息表",
    system: "HIS系统",
    time: '2024-01-18 14:30',
    status: 1
  }
]);

// 肿瘤专业医疗质量控制指标
const cancerIndicator = ref(
    {
      date: '', //时间
      disease: '', // 病种
      skipCount: 1, // 当前页
      maxResultCount: 10 // 一页的数据量
    });

// 获取肿瘤专业医疗质量控制指标列表
const getCancerIndicatorList = (pageData) => {
  console.log("page", cancerIndicator.value)

};

const handleUpdate = (row) => {
  console.log("更新", row);
};
const handleLook = (row) => {
  console.log("更新", row);
};

const changeIndex = (item,index) => {
  console.log(item)
  activeIndex.value = index;
  ElMessage.success(item.title + "切换成功！")
};

</script>
<style lang='scss' scoped>
.catalogue-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px;
  box-sizing: border-box;
  display: flex;

  .left-menu {
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
    background-color: #F9FAFB;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 1px solid #F0F1F3;

    .nav_content {
      height: 100%;
      overflow-y: auto;
      /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-top: 20px;
      .item-nav {
        padding: 10px 10px;
        box-sizing: border-box;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;
        &.active {
          background-color: #E8F4E4; // 高亮背景色
          border-radius: 5px;
          color: #33A860;
          font-weight: bold;
        }
        .icon {
          width: 20px;
          display: block;
        }
        .title {
          margin: 0 10px;
          font-weight: bolder;
          color: #333333;
          font-size: 16px;
          flex: 1;
          /* 指定宽度 */
          width: 150px; // 或根据容器调整
          /* 超出换行 */
          white-space: normal;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 2; // 限制最多显示两行
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .count {
          color: #999999;
        }
      }
    }
  }

  .right-content {
    padding: 0 20px;
    box-sizing: border-box;
    height: 100%;
    flex: 1;
    background-color: #FFFFFF;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;

    .header {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        padding-top: 20px;
        font-size: 22px;
        font-weight: bolder;
        color: #333333;
      }
    }

    .wrapper {
      margin-top: 20px;
      height: calc(100% - 100px);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
      scrollbar-width: none;
      -ms-overflow-style: none;
      .content {
        height: calc(100% - 100px);
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .footer {
        height: 70px;
        width: 100%;
        position: relative;
      }
    }

  }


  .complete {
    color: #33A860;
    background-color: #14532D;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
  }

  .missing {
    color: #E26161;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #7F1C1D;
    font-size: 12px;
  }

  .partialMissing {
    color: #D0A112;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #713F11;
    font-size: 12px;
  }


}
</style>

